<html ng-app="modalTest">
<head>
<!-- Bootstrap Core CSS -->
<link href="/megaacerto/style/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript"
		src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script
	src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"
	type="text/javascript"></script>
<script
	src="http://m-e-conroy.github.io/angular-dialog-service/javascripts/dialogs.min.js"
	type="text/javascript"></script>

<script type="text/javascript">
	angular
			.module('modalTest', [ 'ui.bootstrap', 'dialogs' ])
			.controller(
					'dialogServiceTest',
					function($scope, $rootScope, $timeout, $dialogs) {
						$scope.confirmed = 'You have yet to be confirmed!';
						$scope.name = '"Your name here."';

						$scope.launch = function(which) {
							var dlg = null;
							switch (which) {

							// Error Dialog
							case 'error':
								dlg = $dialogs
										.error('This is my error message');
								break;

							// Wait / Progress Dialog
							case 'wait':
								dlg = $dialogs.wait(msgs[i++], progress);
								fakeProgress();
								break;

							// Notify Dialog
							case 'notify':
								dlg = $dialogs
										.notify('Something Happened!',
												'Something happened that I need to tell you.');
								break;

							// Confirm Dialog
							case 'confirm':
								dlg = $dialogs.confirm('Please Confirm',
										'Is this awesome or what?');
								dlg.result
										.then(
												function(btn) {
													$scope.confirmed = 'You thought this quite awesome!';
												},
												function(btn) {
													$scope.confirmed = 'Shame on you for not thinking this is awesome!';
												});
								break;

							// Create Your Own Dialog
							case 'create':
								dlg = $dialogs.create(
										'/dialogs/whatsyourname.html',
										'whatsYourNameCtrl', {}, {
											key : false,
											back : 'static'
										});
								dlg.result
										.then(
												function(name) {
													$scope.name = name;
												},
												function() {
													$scope.name = 'You decided not to enter in your name, that makes me sad.';
												});

								break;
							}
							; // end switch
						}; // end launch

						// for faking the progress bar in the wait dialog
						var progress = 25;
						var msgs = [ 'Hey! I\'m waiting here...',
								'About half way done...', 'Almost there?',
								'Woo Hoo! I made it!' ];
						var i = 0;

						var fakeProgress = function() {
							$timeout(
									function() {
										if (progress < 100) {
											progress += 25;
											$rootScope.$broadcast(
													'dialogs.wait.progress', {
														msg : msgs[i++],
														'progress' : progress
													});
											fakeProgress();
										} else {
											$rootScope
													.$broadcast('dialogs.wait.complete');
										}
									}, 1000);
						}; // end fakeProgress 

					})
			// end dialogsServiceTest
			.controller(
					'whatsYourNameCtrl',
					function($scope, $modalInstance, data) {
						$scope.user = {
							name : ''
						};

						$scope.cancel = function() {
							$modalInstance.dismiss('canceled');
						}; // end cancel

						$scope.save = function() {
							$modalInstance.close($scope.user.name);
						}; // end save

						$scope.hitEnter = function(evt) {
							if (angular.equals(evt.keyCode, 13)
									&& !(angular.equals($scope.name, null) || angular
											.equals($scope.name, '')))
								$scope.save();
						}; // end hitEnter
					})
			// end whatsYourNameCtrl
			.run(
					[
							'$templateCache',
							function($templateCache) {
								$templateCache
										.put(
												'/dialogs/whatsyourname.html',
												'<div class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><span class="glyphicon glyphicon-star"></span> User\'s Name</h4></div><div class="modal-body"><ng-form name="nameDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[nameDialog.username.$dirty && nameDialog.username.$invalid]"><label class="control-label" for="username">Name:</label><input type="text" class="form-control" name="username" id="username" ng-model="user.name" ng-keyup="hitEnter($event)" required><span class="help-block">Enter your full name, first &amp; last.</span></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty && nameDialog.$invalid) || nameDialog.$pristine">Save</button></div></div></div></div>');
							} ]); // end run / module
</script>

<style type="text/css">
/* Fix for Bootstrap 3 with Angular UI Bootstrap */
.modal {
	display: block;
}

/* Custom dialog/modal headers */
.dialog-header-error {
	background-color: #d2322d;
}

.dialog-header-wait {
	background-color: #428bca;
}

.dialog-header-notify {
	background-color: #eeeeee;
}

.dialog-header-confirm {
	background-color: #333333;
}

.dialog-header-error span,.dialog-header-error h4,.dialog-header-wait span,.dialog-header-wait h4,.dialog-header-confirm span,.dialog-header-confirm h4
	{
	color: #ffffff;
}

/* Ease Display */
.pad {
	padding: 25px;
}
</style>

</head>
<body ng-controller="dialogServiceTest" class="pad">
	<h2>Bootstrap 3 & AngularJS Dialog/Modals</h2>
	<br />
	<div class="row">
		<div class="col-md-12">
			<button class="btn btn-danger" ng-click="launch('error')">Error
				Dialog</button>

			<button class="btn btn-primary" ng-click="launch('wait')">Wait
				Dialog</button>

			<button class="btn btn-default" ng-click="launch('notify')">Notify
				Dialog</button>

			<button class="btn btn-success" ng-click="launch('confirm')">Confirm
				Dialog</button>

			<button class="btn btn-warning" ng-click="launch('create')">Custom
				Dialog</button>
		</div>
	</div>
	<br />
	<div class="row">
		<div class="col-md-12">
			<p>
				<span class="text-info">From Confirm Dialog</span>: {{confirmed}}
			</p>
		</div>
	</div>
	<br />
	<div class="row">
		<div class="col-md-12">
			<p>
				<span class="text-info">Your Name</span>: {{name}}
			</p>
		</div>
	</div>
	<br />
	<p>
		<a
			href="http://michaeleconroy.blogspot.com/2013/10/redux-creating-application-dialog.html"
			target="_top"><strong>View My Blog Post</strong>: Redux: Creating
			an Application Dialog Service using AngularJS, Twitter Bootstrap &
			Angular UI-Bootstrap</a>
	</p>

</body>
</html>